<template>
  <div>
    <el-container>
      <el-header>
        <h2>青梧商城</h2>
        <div class="kai el-icon-s-fold" @click="kai"></div>
        <el-dropdown @command="handleCommand" class="xia">
          <span class="el-dropdown-link">
            青梧商城<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu>
            <el-dropdown-item command="a">QQ群:XXX</el-dropdown-item>
            <el-dropdown-item command="b">青梧商城</el-dropdown-item>
            <el-dropdown-item command="c">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside>
          <el-menu
            default-active="1-4-1"
            class="el-menu-vertical-demo"
            router
            background-color="black"
            text-color="#fff"
            :collapse="isCollapse"
          >
            <el-menu-item index="/home/xi">
              <i class="el-icon-s-home"></i>
              <span slot="title">系统首页</span>
            </el-menu-item>
            <el-submenu
              :index="'' + item.id"
              v-for="item in navs"
              :key="item.id"
            >
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span slot="title">{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="'/home' + item.link"
                  v-for="item in item.children"
                  :key="item.id"
                >
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{ item.name }}</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { nav } from "../api/api";
export default {
  components: {},
  data() {
    return {
      isCollapse: false,
      navs: [],
    };
  },
  mounted() {
    // 请求左侧导航栏数据
    nav().then((res) => {
      this.navs = res.data.data;
    });
  },
  methods: {
    // 点击导航按钮折叠左侧导航
    kai() {
      this.isCollapse = !this.isCollapse;
    },
    // 退出登录
    handleCommand(command) {
      if (command == "c") {
        localStorage.removeItem("token");
        this.$router.push({ name: "login" });
      }
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped>
.el-header,
.el-footer {
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: black;
  color: #333;
  text-align: center;
  height: calc(100vh - 60px);
  width: 200px !important;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 80px;
}

body > .el-container {
  margin-bottom: 40px;
}
h2 {
  width: 200px;
  height: 60px;
  float: left;
  line-height: 60px;
  background: black;
  color: #fff;
  margin-left: -20px;
}
.kai {
  width: 30px;
  height: 30px;
  font-size: 30px;
  float: left;
  margin: 15px;
}
.xia {
  float: right;
  margin-top: 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>